<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .now{
        width: 60%;
        height: 895px;
        background: rgb(0, 133, 241);
        float: left;
    }
    /* 标题1 */
    h1>b{
        margin-top: 203px;
        margin-left: 201px;
        float: left;
    }
    /* 标题2 */
    p{
        color: rgb(0, 133, 241);
        margin-top: 263px;
        margin-left: -280px;
        float: left;
    }
    /* div1 */
    .horizontal{
        width: 300px;
        height: 2px;
        background: rgb(0, 133, 241);
        border-radius: 5px;
        margin-top: 293px;
        margin-left: -280px;
        float: left;
    }
    /* 表单 */
    input{
        width: 300px;
        height: 30px;
        border-radius: 5px;
        margin-top: 20px;
        float: left;
    }
    /* 表单1 */
    .a1{
        margin-top: 310px;
        margin-left: -308px
    }
    /* 表单2 */
    .a2{
        margin-top: 360px;
        margin-left: -309px;
    }
    /* div2 */
    .queding{
        width: 300px;
        height: 30px;
        background:rgb(0, 133, 241);
        border-radius: 5px;
        line-height: 30px;
        text-align: center;
        margin-top: 130px;
        margin-left: 200px;
        float: left;
    }
    .queding>a{
        
    }
</style>
<body>
    <div class="now"></div>   
    <h1><b>LOGO资产管理系统</b></h1>
    <p>账号密码</p>
    <div class="horizontal"></div>
    <input type="text" placeholder="请输入帐号" class="a1">
    <input type="text" placeholder="请输入密码" class="a2">
    <div class="queding" id="commit">确定</div>
</body>
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $('#commit').click(function () {
        {#第一步：给确定按钮一个点击事件#}
        {#第二部：将input文本框中的数据获取#}
        {#第三部：发起异步请求，提交后台#}
    })
</script>
</html>